<template>
	<view class="u-page change-page">
		<u-sticky>
			<view>
				<view class="change-info">
					<view  style="width: 85%;">
						<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">公司名称：{{companyName}}</view>
						<view>法定代表人：{{operName}}</view>
						<view>{{companyCode}}</view>
					</view>
					<view style="width: 10%;">
						<view>{{companyStaus}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom card_title">
					<view class="action">
						<text class="cuIcon-titles text-blue"></text> 变更项
					</view>
					<view class="action">
						<text class="cuIcon-roundaddfill text-blue icon-size" @click="showChange=true"></text>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="change-item">
			<u-form :model="change" ref="changeForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item" v-if="changeList[0].checked" prop="company_name">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 公司名称
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[0].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="changeList[0].value" placeholder="公司名称" class="content_input"/>
					</view>
				</view>
				<view class="c-item"  v-if="changeList[1].checked" prop="address">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 公司住所
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[1].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="changeList[1].value" placeholder="公司住所" class="content_input"/>
					</view>
					<view style="display: flex;">
						<u-input v-model="changeList[1].area"
						 placeholder="面积" class="content_input" type="digit"
						 style="width: 87%;"/>
						<view style="display:flex;align-items: center; text-align: center;">平方米</view>
					</view>
				</view>
				<view class="c-item" v-if="changeList[2].checked" prop="adr">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 经营场所
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[2].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="changeList[2].value" placeholder="经营场所" class="content_input"/>
					</view>
					<view style="display: flex;">
						<u-input v-model="changeList[2].area"
						 placeholder="面积" class="content_input" type="digit"
						 style="width: 87%;"/>
						<view style="display:flex;align-items: center; text-align: center;">平方米</view>
					</view>
				</view>
				<view class="c-item" v-if="changeList[5].checked" prop="legal">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 法定代表人
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[5].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="changeList[5].value" placeholder="法定代表人姓名" class="content_input"/>
						<u-input v-model="changeList[5].legal_card" placeholder="法定代表人身份证" type="idcard" class="content_input"/>
						<u-input v-model="changeList[5].legal_address" placeholder="法定代表人身份证地址" class="content_input"/>
					</view>
				</view>
				<view class="c-item" v-if="changeList[7].checked" prop="manager">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 监事
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[7].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="changeList[7].value" placeholder="监事姓名" class="content_input"/>
						<u-input v-model="changeList[7].legal_card" placeholder="监事身份证" type="idcard" class="content_input"/>
					</view>
				</view>
				<view class="c-item" v-if="changeList[8].checked" v-for="item,index in change.capital" :key="index">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 股东
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundaddfill text-blue icon-size" @click="change.capital.push({name:'',card:'',money:'',time:'',ratio:'',position:''})"></text>
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[8].checked=false"></text>
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="item.name" placeholder="股东姓名" class="content_input"/>
						<u-input v-model="item.card" placeholder="股东身份证" type="idcard" class="content_input"/>
						<view style="display: flex;">
							<u-input v-model="item.money"
							 placeholder="出资额" class="content_input"
							 style="width: 90%;"/>
							<view style="display:flex;align-items: center; text-align: center;">万元</view>
						</view>
						<u-input v-model="item.time" placeholder="出资日期" class="content_input"/>
						<view style="display: flex;">
						<u-input v-model="item.ratio" 
						placeholder="出资比例" class="content_input" style="width: 90%;"/>
						<view style="display:flex;align-items: center; text-align: center;">%</view>
						</view>
						<u-action-sheet :list="positionList" :v-model="true" @click=""></u-action-sheet>
					</view>
				</view>
				<view class="c-item" v-if="changeList[3].checked">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 注册资本
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[3].checked=false"></text>
						</view>
					</view>
					<u-input v-model="change.scope" placeholder="注册资本" class="content_input"/>
				</view>
				<view class="c-item" v-if="changeList[4].checked">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 经营范围
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[4].checked=false"></text>
						</view>
					</view>
					<u-input v-model="changeList[4].value" type="textarea" placeholder="经营范围" class="content_input"/>
				</view>
				<view class="c-item" v-if="changeList[6].checked">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 营业期限
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[6].checked=false"></text>
						</view>
					</view>
					<view style="display: flex;">
						<u-input v-model="changeList[6].value"
						 placeholder="营业期限" class="content_input" type="number"
						 style="width: 93%;"/>
						<view style="display:flex;align-items: center; text-align: center;">年</view>
					</view>
				</view>
				<view class="c-item" v-if="changeList[9].checked">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 认缴出资日期
						</view>
						<view class="action change_del">
							<text class="cuIcon-roundclosefill text-red icon-size" @click="changeList[9].checked=false"></text>
						</view>
					</view>
					<u-input v-model="changeList[9].value" placeholder="认缴出资日期" class="content_input"/>
				</view>
 			</u-form>
		</view>
		<view class="change-button">
			<u-button @click="submit" type="primary">进行变更</u-button>
		</view>
		<u-popup v-model="showChange" mode="bottom"
		 border-radius="15" length="40%" :closeable="true" :safe-area-inset-bottom="true">
		 <view style="padding:100rpx 30rpx; display: flex;">
			 <u-checkbox-group @change="checkboxGroupChange">
			 	<u-checkbox @change="checkboxChange" v-model="item.checked" 
			 		v-for="(item, index) in changeList" :key="index" 
			 		:name="item.name"
			 	>{{item.name}}</u-checkbox>
			 </u-checkbox-group>
		 </view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showChange:false,
				companyId:'',
				companyName:'',
				operName:'',
				companyCode:'',
				companyStaus:'',
				positionList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				change:{
					capital:[{name:'',card:'',money:'',time:'',ratio:'',position:''}],
					scope:''
				},
				rules: {
					name: [
						{
							required: true
						}
					],
					intro: [
						{
							required: true
						}
					]
				},
				changeIteam:[],
				changeList: [
					{
						id:4,
						name: '公司名称',
						checked: false,
						value:''
					},
					{
						id:13,
						name: '公司住所',
						checked: false,
						value:'',
						area:''
					},
					{
						name: '公司经营场所',
						checked: false,
						value:'',
						area:''
					},
					{
						name: '注册资本',
						checked: false
					},
					{
						name: '经营范围',
						checked: false,
						value:''
					},
					{
						name: '法定代表人',
						checked: false,
						value:'',
						legal_card:'',
						legal_address:''
					},
					{
						name: '营业期限',
						checked: false,
						value:''
					},
					{
						name: '监事',
						checked: false,
						value:'',
						legal_card:''
					},
					{
						name: '股东',
						checked: false
					},
					{
						name: '认缴出资日期',
						checked: false,
						value:''
					}
				]
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.companyId=option.id;
			this.companyName=option.name;
			this.operName=option.oper_name;
			this.companyCode=option.companyCode;
			this.companyStaus=option.status;
		},
		methods:{
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			},
			submit(){
				let _that = this;
				let changCategory = [];
				for(let i=0;i<this.changeList.length;i++){
					if(this.changeList[i].checked){
						changCategory.push(this.changeList[i])
					}
				}
				uni.showLoading({
				    title: '文件生成中',
					mask:true,
					success: (success) => {
						let param = {companyId:7,changCategory:changCategory};
						_that.$H.post("/homeapi/change",param,{}).then(res=>{
							if(res.code===1){
								let file = res.data.file; 
								uni.downloadFile({
								  url: file,
								  success: function (res) {
									uni.hideLoading();
								    var filePath = res.tempFilePath;
								    uni.openDocument({
								      filePath: filePath,
									  showMenu: true, // 允许出现分享功能
								      success: function (res) {
								        uni.showToast({
								            title: '文件生成成功，点击右上角分享',
								            duration: 1000
								        });
								      }
								    });
								  },
								  fail:function(res){
									uni.hideLoading();
									uni.showToast({
									    title: '文件生成失败',
										icon:'none',
									    duration: 1000
									});
								  }
								});
							}else{
								setTimeout(function () {
								    uni.hideLoading();
									uni.showToast({
									    title: '文件生成失败',
										icon:'none',
									    duration: 2000
									});
								}, 1000);
							}
						}).catch(err=>{
							setTimeout(function () {
							    uni.hideLoading();
								uni.showToast({
								    title: '文件生成失败',
									icon:'none',
								    duration: 2000
								});
							}, 1000);
						})
					}
				});
			}
		}
	}
</script>

<style>
	.change-page{
		display: flex;
		flex-direction: column;
	}
	.change-item{
		padding: 30rpx 30rpx 40px 30rpx;
	}
	.c-item{
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		flex-direction: column;
	}
	.c-item u-form-item{
		width: 85%;
	}
	.icon-size{
		font-size: 50rpx !important;
	}
	.change-info{
		padding: 20rpx 30rpx;
		background-color: #2979ff;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}
	.change-button{
		position: fixed;
		z-index: 9999;
		bottom: 0;
		width: 100%;
	}
	.change_view{
		min-height: 50rpx;
	}
	.c-item .change_view .change_item{
		margin-left: 0rpx;
	}
	.c-item .change_view .change_del{
		margin-right: 0px;
	}
	.content_input .u-input input{
		min-height: 100rpx !important;
	}
</style>
